import { onMounted, ref,reactive } from 'vue';
import { gsap } from 'gsap';

export const homeCartoon = (homeRef:any) => {
	const stateMixin = reactive({
		nextState:false
	})
	const tl = gsap.timeline();
	const tl1 = gsap.timeline();
	const tl2 = gsap.timeline();
	const tl3 = gsap.timeline();
	const tl4 = gsap.timeline();
	const tl5 = gsap.timeline();
	const startY = ref(0);
	const endY = ref(0);

	onMounted(() => {
		// GSAP 动画
		gsap.from('.tlp', {
			duration: 1.5,
			x: -100, // 从左侧滑入
			// opacity: 0,
			delay: 0, // 延迟 0.5 秒
			ease: 'power2.out',
		});

		gsap.from('.try', {
			duration: 1.5,
			x: 100, // 从右侧滑入
			// opacity: 0,
			delay: 0, // 延迟 1 秒
			ease: 'power2.out',
		});

		gsap.from('.tcy', {
			duration: 1.5,
			// opacity: 0,
			y: -100, // 从上方滑入
			// opacity: 0.5, // 从透明到不透明
			delay: 0,
			ease: 'power2.out',
		});

		gsap.from('.ft', {
			duration: 1.5,
			y: -120, // 从下方滑入
			x: 500,
			// opacity: 0,
			delay: 0.5, // 延迟 1.5 秒
			ease: 'power2.out',
		});

		tl.to('.yf', {
			duration: 0.5,
			rotation: -30,
			ease: 'power2.out',
			delay: 1.5,
		})
			.to('.yf', {
				duration: 0.5,
				y: 320,
				ease: 'bounce.out',
			})
			.to('.yf', {
				duration: 0.5,
				rotation: 0,
				ease: 'power2.out',
			});

		tl1
			.to('.hlh', {
				duration: 0.5,
				// rotation: -30,
				ease: 'power2.out',
				delay: 1.7,
			})
			.to('.hlh', {
				duration: 0.5,
				y: 240,
				ease: 'bounce.out',
			})
			.to('.hlh', {
				// duration: 0.5,
				rotation: 0,
				ease: 'power2.out',
			});

		tl2
			.to('.llh', {
				duration: 0.5,
				// rotation: -30,
				ease: 'power2.out',
				delay: 1.9,
			})
			.to('.llh', {
				duration: 0.5,
				y: 240,
				ease: 'bounce.out',
			})
			.to('.llh', {
				// duration: 0.5,
				rotation: 0,
				ease: 'power2.out',
			});

		tl3
			.to('.dlh', {
				duration: 0.5,
				// rotation: -30,
				ease: 'power2.out',
				delay: 2.5,
			})
			.to('.dlh', {
				duration: 0.5,
				y: homeRef.value.offsetHeight - 90,
				ease: 'bounce.out',
			})
			.to('.dlh', {
				// duration: 0.5,
				rotation: 0,
				ease: 'power2.out',
			})
			.to('.dlhd', {
				rotation: -5,
				x: 0,
				y: -50,
				ease: 'bounce.out',
			})
			.to(
				'.bg',
				{
					display: 'block',
					ease: 'bounce.out',
					opacity: 1,
				},
				'-=0.3'
			)
			.to(
				'.lcd',
				{
					display: 'block',
					ease: 'bounce.out',
					opacity: 1,
				},
				'-=0.5'
			);

		tl4
			.to('.hzl', {
				display: 'block',
				delay: 4,
			})
			.to(
				'.yb1',
				{
					duration: 0.2,
					x: 50,
					y: -120,
					width: 10,
				},
				'-=0.5'
			)
			.to(
				'.yb2',
				{
					duration: 0.2,
					x: 130,
					y: -70,
					width: 20,
				},
				'-=0.5'
			)
			.to(
				'.hg',
				{
					duration: 0.2,
					x: 200,
					y: -70,
					width: 70,
				},
				'-=0.5'
			)
			.to(
				'.hz',
				{
					duration: 0.2,
					x: 25,
					y: -50,
					width: 40,
				},
				'-=0.5'
			)
			.to(
				'.hz',
				{
					duration: 0.2,
					x: 50,
					y: 110,
					width: 80,
				},
				'-=0.5'
			)
			.to(
				'.yb3',
				{
					duration: 0.2,
					x: -80,
					y: 100,
					width: 30,
				},
				'-=0.5'
			)
			.to(
				'.cd',
				{
					display: 'block',
					opacity: 1,
				},
				'-=0.5'
			)
			.to('.text1', {
				duration: 1, // 每行动画持续时间
				opacity: 1,
				ease: 'power2.out',
			})
			.to('.text2', {
				duration: 1, // 每行动画持续时间
				opacity: 1,
				ease: 'power2.out',
			})
			.to('.text3', {
				duration: 1, // 每行动画持续时间
				opacity: 1,
				ease: 'power2.out',
			})
			.to('.text4', {
				duration: 1, // 每行动画持续时间
				opacity: 1,
				ease: 'power2.out',
			});

		gsap.from('.bly', {
			duration: 1.5,
			x: -500, // 从左侧滑入
			y: 500,
			// opacity: 0,
			delay: 0, // 延迟 2 秒
			ease: 'power2.out',
		});

		gsap.from('.bry', {
			duration: 1.5,
			x: 100, // 从右侧滑入
			y: 500,
			opacity: 0,
			delay: 0, // 延迟 2.5 秒
			ease: 'power2.out',
		});
	});
	const handleTouchStart = (event: any) => {
		startY.value = event.touches[0].clientY; // 获取起始 Y 坐标
	};
	const handleTouchEnd = (event: any) => {
		endY.value = event.changedTouches[0].clientY; // 获取结束 Y 坐标
		checkSwipeDirection(); // 检查滑动方向
	};
	const checkSwipeDirection = () => {
		const deltaY = endY.value - startY.value; // 计算 Y 轴差值
		if (deltaY < -100) {
			tl5
				.to('.neirong', {
					duration: 0.3,
					opacity: 0,
					ease: 'power2.out',
				})
				.to('.haibao', {
					display: 'block',
				})
				.to('.xfy', {
					duration: 0.5,
					y: -239,
				})
				.to('.homeImg', {
					duration: 0.5,
					y: -560,
					display: 'block',
				})
				.to('.xft', {
					duration: 0.5,
					y: 130,
					x: -100,
				})
				.to('.logo', {
					duration: 0.5,
					opacity: 1,
				})
				.to(
					'.btn',
					{
						duration: 0.5,
						opacity: 1,
					},
					'-=0.5'
				);

		}
	};
	return {
		handleTouchStart,
		handleTouchEnd,
		stateMixin
	}
};
export const slide = () => {};
